<!--
<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Category_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-category_id" data-rule="required" min="0" data-source="category/selectpage" data-params='{"custom[type]":"question"}' class="form-control selectpage" name="row[category_id]" type="text" value="{$row.category_id|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Question_title')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-question_title" data-rule="required" class="form-control" name="row[question_title]" type="text" value="{$row.question_title|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Question_type')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-question_type" data-rule="required" class="form-control" name="row[question_type]" type="text" value="{$row.question_type|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Options_json')}:</label>
        <div class="col-xs-12 col-sm-8">

            <dl class="fieldlist" data-name="row[options_json]">
                <dd>
                    <ins>{:__('Key')}</ins>
                    <ins>{:__('Value')}</ins>
                </dd>
                <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a></dd>
                <textarea name="row[options_json]" class="form-control hide" cols="30" rows="5">{$row.options_json|htmlentities}</textarea>
            </dl>


        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Answer')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-answer" class="form-control" name="row[answer]" type="text" value="{$row.answer|htmlentities}">
        </div>
    </div>


    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
        </div>
    </div>
</form>
-->
<style>
    .m-t-5 {
        margin-top: 5px;
    }

    .m-l-5 {
        margin-left: 5px;
    }

    .m-l-10 {
        margin-left: 10px !important;
    }

    .fill-option {
        display: flex;
        flex-wrap: wrap;
        margin: 10px;
    }

    .short-option {
        display: flex;
        flex-wrap: wrap;
        margin: 10px;
    }

</style>
<link href="./backend.min.css" rel="stylesheet">
<script src="https://exam.jykezhi.com/assets/addons/exam/js/vue.js"></script>

<div id="app">
    <form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Category_id')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-category_id" data-rule="required" min="0"  data-source="question/category/selectpage"  class="form-control selectpage" name="row[category_id]" type="text" value="{$row.category_id|htmlentities}">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Question_title')}:</label>
            <div class="col-xs-12 col-sm-8">
                <!--                <p :class="[showTitleEditor?'active1':'active2']"> 样式</p>-->
                <!--<div id="c-title1" style="display: block;">
                    <textarea id="c-question_title" class="form-control editor" rows="5" name="row[question_title]" cols="50"></textarea>
                </div>-->

                <input id="c-title2" name="row[question_title]" type="text" class="form-control" v-model="title">

            </div>
        </div>


        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Kind')}:</label>
            <div class="col-xs-12 col-sm-8">
                <label for="row[kind]-SINGLE">
                    <input id="row[kind]-SINGLE" name="row[kind]" @click="changeKind('SINGLE')" type="radio" value="SINGLE" {if $row.kind == 'SINGLE'}checked="checked"{/if}>
                    单选题
                </label>
                <label for="row[kind]-MULTI">
                    <input id="row[kind]-MULTI" name="row[kind]" @click="changeKind('MULTI')" type="radio" value="MULTI" {if $row.kind == 'MULTI'}checked="checked"{/if}>
                    多选题
                </label>
                <label for="row[kind]-FILL">
                    <input id="row[kind]-FILL" name="row[kind]" @click="changeKind('FILL')" type="radio" value="FILL" {if $row.kind == 'FILL'}checked="checked"{/if}>
                    填空题
                </label>
            </div>
        </div>
        <div v-if="!showTitleFill">
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">选项: </label>
                <div class="col-xs-12 col-sm-8">
                    <dl data-name="row[options_json]" class="fieldlist" data-listidx="0">
                        <dd>
                            <ins>选项</ins>
                            <ins>内容</ins>
                        </dd>

                        <dd>
                            <a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i>添加选项</a>
                        </dd>
                        <textarea name="row[options_json]" cols="30"  rows="5" class="form-control hide">{$row.options_json|htmlentities}</textarea>
                    </dl>

                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">正确答案:</label>
                <div class="col-xs-12 col-sm-8">
                    <input  id="c-answer" name="row[answer]" value="{$row.answer}" type="text" readonly="readonly" class="form-control">
                </div>
            </div>
        </div>
        <div v-if="showTitleFill">
            <div class="form-group"><label class="control-label col-xs-12 col-sm-2">填空位:</label>
                <div class="col-xs-12 col-sm-8">
                    <button type="button" class="btn btn-success" @click="addFillOptions">
                        <i class="fa fa-plus"></i>新增填空位
                    </button>
                    <div v-for="(item, index) in fillOptions" :key="index">
                        <p style="margin-left: 10px; margin-top: 10px;">填空位（{{index+1}}）答案（任意答案匹配即算正确）</p>
                        <div class="fill-option" v-for="(items, indexs) in item.answers" :key="indexs">
                            <div>
                                <input type="text"  v-model="fillOptions[index].answers[indexs]"  class="form-control" placeholder="请输入答案">
                            </div>
                            <div class="m-l-10">
                                <button type="button" class="btn btn-danger" @click="deleteFillAnswer(index,indexs)">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>
                        </div>
                        <button type="button" class="btn btn-info" @click="addFillAnswer(index)">
                            <i class="fa fa-plus"> 新增答案项</i>
                        </button>
                    </div>
                </div>
            </div>
        </div>


        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
            <div class="col-xs-12 col-sm-8">
                {:build_radios('row[status]', ['normal'=>__('Normal'), 'hidden'=>__('Hidden')], $row['status'])}
            </div>
        </div>
        <div class="form-group layer-footer">
            <label class="control-label col-xs-12 col-sm-2"></label>

            <div class="col-xs-12 col-sm-8">
                <input type="button" id="valid" class="hide" @click="valid">
                <button type="submit" class="btn btn-success btn-embossed">确定</button>
                <button type="reset" class="btn btn-default btn-embossed">重置</button>
            </div>
        </div>
    </form>
</div>



<script>
    var valid_result = false
    var row =  {:json_encode($row); };

    var app = new Vue({
        el: '#app',
        data: {
            title: '',
            kind: 'SINGLE',
            // 填空题
            fillOptions: [],
            fullval:[],
            showTitleEditor: true,
            showTitleFill: true,
            optionsJson:[]
        },
        created() {
            console.log('row', row)
            // 编辑时初始化数据
            if (row) {
                this.title = row.question_title
                this.kind = row.kind
                //this.optionsJson = row.options_json
                if (row.options_json){
                    this.optionsJson = JSON.parse(row.options_json)
                }

                console.log('optionsJson', this.optionsJson)
                //console.log('optionsJson', JSON.parse(this.optionsJson))
                switch (row.kind) {
                    // 填空题
                    case 'FILL':
                        this.fillOptions = JSON.parse(row.answer)
                        console.log('fillOptions', this.fillOptions)
                        break
                    default:
                        break
                }

                this.hideTitle(row.kind)
            } else {
                // $('#c-title2').hide()
                this.showTitleFill = false
            }
        },
        methods: {
            // 修改题型
            changeKind(e) {
                console.log('e', e)
                //console.log('changeKind', e.target.value)
                //this.kind = e.target.value
                this.kind = e;
                this.hideTitle(this.kind)
            },

            // 隐藏题目
            hideTitle(kind) {
                console.error(kind)
                if (kind == 'FILL') {
                    this.showTitleEditor = false
                    this.showTitleFill = true

                    //$('#option').hide()
                    //$('#fill').show()
                } else {
                    this.showTitleEditor = true
                    this.showTitleFill = false

                    //$('#fill').hide()
                    //$('#option').show()
                }

                console.log('hideTitle', kind, this.showTitleEditor, this.showTitleFill)
            },
            // 填空题 - 插入填空位
            addFillOptions() {
                this.fillOptions.push({
                    answers: [''],
                })
                console.error(this.fillOptions)
                this.title = this.title == undefined ? '' : this.title
                this.title += '______'// 6个_
            },
            // 填空题 - 填空位添加答案
            addFillAnswer(index) {
                this.fillOptions[index].answers.push('')
            },
            // 填空题 - 填空位删除答案
            deleteFillAnswer(index, key) {
                if (this.fillOptions[index].answers.length === 1) {
                    this.fillOptions.splice(index, 1)
                } else {
                    this.fillOptions[index].answers.splice(key, 1)
                }
            },
            // 修改题目
            changeTitle(e) {
                console.log('changeTitle e', e, this.title)
            },
            // 验证
            valid() {
                console.log('trigger valid', this.kind)
                switch (this.kind) {
                    case 'FILL':
                        console.log('this.fillOptions', this.fillOptions)
                        for (let i = 0; i < this.fillOptions.length; i++) {
                            let option = this.fillOptions[i]
                            for (let j = 0; j < option.answers.length; j++) {
                                let answer = option.answers[j]
                                console.log('answer', answer)
                                if (answer.length == 0) {
                                    Fast.api.msg('填空位（' + (i + 1) + '）的第' + (j + 1) + '个答案不能为空')
                                    console.log('填空位（' + (i + 1) + '）的第' + (j + 1) + '个答案不能为空')
                                    valid_result = false
                                    return false
                                }
                            }
                        }

                        $('#c-answer').val(JSON.stringify(this.fillOptions))
                        valid_result = true
                        return true
                    default:
                        valid_result = true
                        return true

                }
            }
        }
    })
</script>